<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .bgc{
            background-color: orange;
        }
        .fontsize{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="aps">

        <h2 v-bind:title="biaoti">我要动态绑定一个属性</h2>
        <!-- 自定义属性简写 -->
        <h2 :data-id="aaa">vue绑定自定义属性</h2>
        <h3 :data-id='aaa'>一点都不慌</h3>
        <!-- 添加类名里面可以使用三元表达式 -->
        <h4 :data-id='aaa' :class="['red',flag?'fontsize':'']">还是有点慌</h4>
        <!-- 绑定方法简写 -->
        <!-- <button v-on:click='dianwo'>点击我试试</button> -->
        <button @click='dianwo'>点击我试试</button>

        <!-- v-for 可以遍历数组 , 对象  , 字符串 ,数字(遍历数字会从1遍历到设置的数字)-->
        <!-- es5写法 -->
        <ul>
            <li v-for="(item,index) in list">
                name : {{item}} --- 索引 : {{index}}
            </li>
        </ul>

        <!-- es6写法 -->
        <ul>
            <li v-for="(item,index) of obj">
                name : {{item}} --- 索引 : {{index}}
            </li>
        </ul>

        <!-- es6写法 -->
        <ul>
            <li v-for="(item,index) of str">
                name : {{item}} --- 索引 : {{index}}
            </li>
        </ul>

    </div>
    <script>
        new Vue({
            el : '.aps',
            data : {
                //第一天
                msg : 'v-text',
                msg1 : 'v-html',
                msg2 : 'v-show',
                msg3 : "{{}}",
                msg4 : 'v-on:click=dianwo',
                //第二天
                msg5 : 'v-bind',
                biaoti : '我是一个title',
                aaa : '自定义id',
                flag : true,
                list : ['璇璇','老婆','傻瓜'],
                obj : {
                    id : 1,
                    name : '信爷',
                    des : '世界最帅的男人',
                    price : '20000000000'
                },
                str : '璇璇老婆很的傻'
            },
            methods : {
                dianwo(){
                    this.flag = !this.flag
                }

            }



        })
    
    
    </script>
</body>
</html>